<template>
	<div>
		<el-dialog title="添加客服账号" :visible.sync="dialogVisible" @close="closeEdit(false)" width="800px">
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="账号" prop="account"><el-input v-model.number="ruleForm.account"></el-input></el-form-item>
				<el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item>
				<el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input></el-form-item>
				<el-form-item label="使用者" prop="user"><el-input v-model.number="ruleForm.user"></el-input></el-form-item>
				<el-form-item label="账号权限">
					<el-select v-model="ruleForm.role" placeholder="账号权限">
						<el-option label="一星客服" value="1"></el-option>
						<el-option label="二星客服" value="2"></el-option>
						<el-option label="三星客服" value="3"></el-option>
						<el-option label="认证客服" value="10"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="管理区域">
					<el-select v-model="ruleForm.address" placeholder="管理区域">
						<el-option label="广东" value="广东"></el-option>
						<el-option label="北京" value="北京"></el-option>
						<el-option label="福建" value="福建"></el-option>
						<el-option label="浙江" value="浙江"></el-option>
						<el-option label="所有区域" value="all"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<SubmitButton type="primary" size="" :ref-form="()=>{return this.$refs['ruleForm']}"
					:post-option="{
						url: setRegistUrl, 
						data: encryptPassForm(), 
						callback: checkCB 
						}">
					  提交
					</SubmitButton>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
					
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import SubmitButton from '../common/SubmitButton';

import CommonApi from '../../api/CommonApi';
import ProcurementApi from '../../api/ProcurementApi';
import AccountApi from '../../api/AccountApi';
//需要导入vuex的数据管理
import Store from '../../store/index.js'

import Md5Kit from '../../kit/Md5Kit' 

export default {
	components: {
		SubmitButton
	},
	data() {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.ruleForm.pass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			ruleForm: {
				pass: '',
				checkPass: '',
				account: '',
				address: '',
				user: '',
				parentId: Store.state.user.apiUserId
			},
			rules: {
				pass: [{ validator: validatePass, trigger: 'blur' }],
				checkPass: [{ validator: validatePass2, trigger: 'blur' }]
			},
			setRegistUrl: AccountApi.URL_ACCOUNT_REGIST
		};
	},
	props: ['isShow', 'procurementObj', 'checkYes'],
	computed: {
		dialogVisible: {
			get: function() {
				return this.isShow;
			},
			set: function(val) {}
		}
	},
	created() {},
	methods: {
		checkCB(json) {
			this.closeEdit(true);
		},
		closeEdit(isSuccess) {
			this.$root.eventHub.$emit('closeEditDialog', isSuccess);
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					//注册账号
					console.log(this.ruleForm);
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		encryptPassForm(){
		  return {
				pass: Md5Kit.encryptMd5(this.ruleForm.pass),
				checkPass: Md5Kit.encryptMd5(this.ruleForm.checkPass),
				account: this.ruleForm.account,
				address: this.ruleForm.address,
				user: this.ruleForm.user,
				role: this.ruleForm.role,
				parentId: Store.state.user.apiUserId
			}
		}
	}
};
</script>
